<template>
    <div class="person_container">

        <div class="header_container">
            <div class="wrap">
                <div class="left">
                    <img src="@/assets/person/userdefault.png" alt="">
                    <div class="userInfo">
                        <p class="user" >用户{{ userInfoStore.userInfo.name }}</p>
                        <div>
                            <span class="user_lever">普通用户</span>
                        </div>
                    </div>
                </div>
                <div class="right"></div>
            </div>
        </div>

        <div class="myAsset">
            <div class="myAsset_title">我的资产</div>
            <div class="myAssetList">
                <div class="myAssetItem">
                    <div>
                        <span style="font-size:12px;">￥</span>
                        <span style="font-size:16px;">0</span>
                    </div>
                    <div style="font-size:16px">余额</div>
                </div>
                <div class="myAssetItem">
                    <div>
                        <span style="font-size:16px;">0</span>
                    </div>
                    <div style="font-size:16px">红包</div>
                </div>
                <div class="myAssetItem">
                    <div>
                        <span style="font-size:16px;">0</span>
                    </div>
                    <div style="font-size:16px">优惠卷</div>
                </div>
                <div class="myAssetItem">
                    <div>
                        <span style="font-size:16px;">0</span>
                    </div>
                    <div style="font-size:16px">积分</div>
                </div>
                <div class="myAssetItem">
                    <div>
                        <span style="font-size:16px;">0</span>
                    </div>
                    <div style="font-size:16px">礼品卡</div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card_container">
                <i class="card_data"></i>
                <i class="card_year"></i>
                <span class="card_line">|</span>
                <span class="bannerBtn">限时开通</span>
            </div>
        </div>

        <div class="user_info_list">
            <ul class="user_list">
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>
                <li class="user_item">
                    <a class="user_info" href="">
                        <i class="iconfont icon-dingdan iconlist"></i>
                        <span class="orderInfo">我的订单</span>
                    </a>
                </li>

            </ul>

        </div>

        <div class="logout">
            <button class="btn_logout" @click="onlogot">退出登录</button>
        </div>
    </div>
    <!-- <login></login> -->
    <!-- <order></order> -->
</template>

<script setup lang="ts">
import { logout } from '@/api/user/user';
import { useUserInfoStore } from '@/stores/module/user';
import { ref } from 'vue';
import {useRouter} from 'vue-router'
import login from '../../components/login/index.vue'
import order from '../order/index.vue'
const userInfoStore = useUserInfoStore()
const router = useRouter()
const userName = ref('')

const onlogot = async () => {
    try {
        await userInfoStore.reset()
        router.push('/home')
    } catch (error) {

    }
}
</script>

<style scoped lang="less">
.person_container {
    width: 100%;
    padding-bottom: 60px;
    background-color: #eeeeee;

    .header_container {


        height: 135px;
        background-image: url('@/assets/person/person.png');

        .left {
            display: flex;
            // flex-direction: column;
            padding: 32px 10px;
            align-items: center;
            width: 240px;
            height: 71px;

            img {
                border-radius: 50%;
                width: 71px;
                height: 71px;
            }
        }

        .userInfo {
            margin-left: 11px;

            .user {
                color: #fff;
                font-size: .36rem;
                line-height: 1.2;
                text-align: left;
                margin-bottom: 1px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .user_lever {
                color: #fff;
                font-size: .28rem;
                vertical-align: middle;
            }
        }
    }

    .myAsset {
        background-color: #fff;

        .myAsset_title {
            height: 53px;
            line-height: 53px;
            margin-left: 10px;
            font-size: 14px;
            border-bottom: 1px solid #eee;
        }

        .myAssetList {
            height: 80px;
            display: flex;
            justify-content: space-between;

            .myAssetItem {
                text-align: center;
                width: 70px;
                height: 64px;
                padding: 16px 0 0;
            }
        }
    }

    .card {
        background: #fff;
        padding: 0 10px 10px;
        margin-bottom: 10px;

        .card_container {
            height: 43px;
            background: #fff6f4;
            border: .01rem solid rgba(221, 26, 33, .1);
            width: 335px;
            align-items: center;
            display: flex;
            margin: 0 auto;
            border-radius: 10px;
            padding: 0 10px;

            .card_data {
                display: inline-block;
                width: 27px;
                height: 27px;
                background: url('@/assets/person/card_data.png') 0% 0% / 100% 100% no-repeat;

            }

            .card_year {
                display: block;
                background: url('@/assets/person/card_year.png') 0% 0% / 100% 100% no-repeat;
                width: 65px;
                height: 15px;
                margin-left: 5px;
            }

            .card_line {
                margin-left: 0.02rem;
                color: #333;
                font-weight: lighter;
                font-size: 12px;
            }

            .bannerBtn {
                position: absolute;
                right: 20px;
                width: 68px;
                height: 22px;
                line-height: 22px;
                font-size: 12px;
                text-align: center;
                color: #fff;
                background: #dd1a21;
                border-radius: 10px;
            }
        }
    }

    .user_info_list {
        margin-bottom: 20px;

        .user_list {
            background: #fff;
            width: 100%;
            height: 454px;

            .user_info {
                text-align: center;
                display: block;
            }

            .user_item {
                padding: 22.5px 0 0;
                float: left;
                width: 124px;
                border-right: 1px solid rgba(0, 0, 0, .15);
                border-bottom: 1px solid rgba(0, 0, 0, .1);
                height: 67.5px;

                .iconlist {
                    display: inline-block;
                    margin: 0 auto;
                    font-size: 20px;
                }

                .orderInfo {
                    text-align: center;
                    display: block;
                    font-size: 12px;
                    color: #333;
                }

            }

            .user_item:nth-of-type(3n) {
                border-right: none;

            }
        }
    }

    .logout {



        .btn_logout {
            font-size: 16px;
            height: 48px;
            display: block;
            width: 100%;
            background: #fff;
            border: none;

        }
    }

}
</style>